﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id="Description">This demo shows some of the functionalities available in jqxBulletChart's
        API.</title>
    <meta name="keywords" content="API, bullet chart, bullet graph, BulletChart, chart, event, jQuery bullet graph, jQuery bullet chart, jQWidgets, jqxBulletChart, method, options, properties, property, settings" />
    <meta name="description" content="This demo shows some of the functionalities available in jqxBulletChart's API." />
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbulletchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxBulletChart").jqxBulletChart({
                width: 500,
                height: 80,
                barSize: "40%",
                title: "Revenue 2014 YTD",
                description: "(U.S. $ in thousands)",
                ranges: [
                    { startValue: 0, endValue: 200, color: "#000000", opacity: 0.5 },
                    { startValue: 200, endValue: 250, color: "#000000", opacity: 0.3 },
                    { startValue: 250, endValue: 300, color: "#000000", opacity: 0.1 }
                ],
                pointer: { value: 270, label: "Revenue 2014 YTD", size: "25%", color: "" },
                target: { value: 260, label: "Revenue 2013 YTD", size: 4, color: "" },
                ticks: { position: "both", interval: 50, size: 10 },
                labelsFormat: "c",
                animationDuration: 0,
                showTooltip: true
            });

            $("#settingsExpander").jqxExpander({ width: 200, height: 520, toggleMode: "none", showArrow: false });

            $("#showLabelsCheckbox").jqxCheckBox({ checked: true });
            $("#nearRadio, #farRadio").jqxRadioButton({ checked: false, groupName: "position" });
            $("#bothRadio").jqxRadioButton({ checked: true, groupName: "position" });
            $("#currencyRadio").jqxRadioButton({ checked: true, groupName: "format" });
            $("#percentRadio, #noneRadio").jqxRadioButton({ checked: false, groupName: "format" });
            $("#enableAnimationCheckbox").jqxCheckBox({ checked: false });
            $("#valueSlider").jqxSlider({ width: 175, min: 0, max: 300, step: 10, showTicks: false, mode: "fixed", showButtons: false, value: 270 });
            var colorChoices = ["Black", "Red", "Green", "Blue", "From theme"];
            $("#pointerDropDownList, #targetDropDownList").jqxDropDownList({ source: colorChoices, selectedIndex: 4, width: "100%", height: 25, autoDropDownHeight: true });
            $("#disabledCheckbox, #rtlCheckbox").jqxCheckBox({ checked: false });

            $("#showLabelsCheckbox").on("change", function (event) {
                var checked = event.args.checked;
                if (checked) {
                    $("#nearRadio, #farRadio, #bothRadio").jqxRadioButton("enable");
                    if ($("#nearRadio").jqxRadioButton("checked") == true) {
                        $("#jqxBulletChart").jqxBulletChart({ ticks: { position: "near"} });
                    } else if ($("#farRadio").jqxRadioButton("checked") == true) {
                        $("#jqxBulletChart").jqxBulletChart({ ticks: { position: "far"} });
                    } else {
                        $("#jqxBulletChart").jqxBulletChart({ ticks: { position: "both"} });
                    }
                } else {
                    $("#jqxBulletChart").jqxBulletChart({ ticks: { position: "none"} });
                    $("#nearRadio, #farRadio, #bothRadio").jqxRadioButton("disable");
                }
            });
            $("#nearRadio").on("checked", function (event) {
                $("#jqxBulletChart").jqxBulletChart({ ticks: { position: "near"} });
            });
            $("#farRadio").on("checked", function (event) {
                $("#jqxBulletChart").jqxBulletChart({ ticks: { position: "far"} });
            });
            $("#bothRadio").on("checked", function (event) {
                $("#jqxBulletChart").jqxBulletChart({ ticks: { position: "both"} });
            });

            $("#currencyRadio").on("checked", function (event) {
                $("#jqxBulletChart").jqxBulletChart({ labelsFormat: "c" });
            });
            $("#percentRadio").on("checked", function (event) {
                $("#jqxBulletChart").jqxBulletChart({ labelsFormat: "p" });
            });
            $("#noneRadio").on("checked", function (event) {
                $("#jqxBulletChart").jqxBulletChart({ labelsFormat: null });
            });

            $("#enableAnimationCheckbox").on("change", function (event) {
                var checked = event.args.checked;
                if (checked) {
                    $("#jqxBulletChart").jqxBulletChart({ animationDuration: 400 });
                } else {
                    $("#jqxBulletChart").jqxBulletChart({ animationDuration: 0 });
                }
            });

            $("#valueSlider").on("change", function (event) {
                var value = event.args.value;
                $("#jqxBulletChart").jqxBulletChart("val", value);
            });

            $("#pointerDropDownList").on("change", function (event) {
                var choice = event.args.item.label;
                var newColor;
                if (choice != "From theme") {
                    newColor = choice;
                } else {
                    newColor = "";
                }
                $("#jqxBulletChart").jqxBulletChart({ pointer: { color: newColor} });
            });

            $("#targetDropDownList").on("change", function (event) {
                var choice = event.args.item.label;
                var newColor;
                if (choice != "From theme") {
                    newColor = choice;
                } else {
                    newColor = "";
                }
                $("#jqxBulletChart").jqxBulletChart({ target: { color: newColor} });
            });

            $("#disabledCheckbox").on("change", function (event) {
                var checked = event.args.checked;
                if (checked) {
                    $("#jqxBulletChart").jqxBulletChart({ disabled: true });
                } else {
                    $("#jqxBulletChart").jqxBulletChart({ disabled: false });
                }
            });
            $("#rtlCheckbox").on("change", function (event) {
                var checked = event.args.checked;
                if (checked) {
                    $("#jqxBulletChart").jqxBulletChart({ rtl: true });
                } else {
                    $("#jqxBulletChart").jqxBulletChart({ rtl: false });
                }
            });
        });
    </script>
</head>
<body>
    <div id="jqxBulletChart" style="float: left; margin-left: 10px;">
    </div>
    <div id="settingsExpander" style="float: left; margin-left: 60px;">
        <div>
            jqxBulletChart settings</div>
        <div>
            <div style="padding: 5px;">
                <div id="showLabelsCheckbox">
                    Show labels</div>
                <ul style="list-style: none; padding: 0px; margin-top: 10px; margin-left: 20px; font-family: Verdana;
                    font-size: 12px;">
                    <li>
                        <div id="nearRadio">
                            Near</div>
                    </li>
                    <li>
                        <div style="margin-top: 5px;" id="farRadio">
                            Far</div>
                    </li>
                    <li>
                        <div style="margin-top: 5px;" id="bothRadio">
                            Both</div>
                    </li>
                </ul>
                <br />
                <div>
                    Labels format:</div>
                <ul style="list-style: none; padding: 0px; margin-top: 10px; margin-left: 20px; font-family: Verdana;
                    font-size: 12px;">
                    <li>
                        <div id="currencyRadio">
                            Currency</div>
                    </li>
                    <li>
                        <div style="margin-top: 5px;" id="percentRadio">
                            Percent</div>
                    </li>
                    <li>
                        <div style="margin-top: 5px;" id="noneRadio">
                            None</div>
                    </li>
                </ul>
                <br />
                <div id="enableAnimationCheckbox">
                    Enable animation</div>
                <br />
                <div>
                    Pointer value:</div>
                <div id="valueSlider" style="padding-left: 5px;">
                </div>
                <br />
                <div>
                    Pointer color:</div>
                <div id="pointerDropDownList">
                </div>
                <br />
                <div>
                    Target color:</div>
                <div id="targetDropDownList">
                </div>
                <br />
                <div id="disabledCheckbox" style="margin-bottom: 5px;">
                    Disabled</div>
                <div id="rtlCheckbox">
                    Right-to-left</div>
            </div>
        </div>
    </div>
</body>
</html>
